<template>

	<div style="margin-top: 20px;" align="center">
		<div
			style="width: 60%;background-color: #ffffff;border-radius: 10px;box-shadow: 0px 0px 5px rgb(0, 0, 0, 0.2);display: inline-block;">
			<div style="margin-top: 20px;">
				<el-row>
					<el-col :span="2" style="height: 100px;">
						<a href="javascript:;" @click="left()"><i class="el-icon-d-arrow-left"
								style="font-size: 30px;line-height: 100px;"></i></a>
					</el-col>
					<el-col :span="20" style="height: 100px;" align="left">

						<!--外部嵌套层-->
						<div class="div">
							<div class="box" id="mian">
								<a href="javascript:;" v-for="item,index in airlineCompanyData"
									@click="informationSwitching(index)">
									<div class="box1" align="center">
										<div style="height: 65%;display:table;">
											<div style="display:table-cell;vertical-align:middle;">
												<img :src="item.imgSrc" style="height: 35px;" />
											</div>
										</div>
										<div style="height: 45%;">
											<div style="font-size: 10px;color: #767676;">
												{{item.name}}
											</div>
										</div>
									</div>
								</a>

								<a href="javascript:;" @click="informationSwitchingend()">
									<div class="box1" style="margin-right: 20px;" align="center">
										<div style="height: 65%;display:table;">
											<div style="display:table-cell;vertical-align:middle;">
												<img :src="airlineCompanyDataEnd.imgSrc" style="height: 35px;" />
											</div>
										</div>
										<div style="height: 45%;">
											<div style="font-size: 10px;color: #767676;">
												{{airlineCompanyDataEnd.name}}
											</div>
										</div>
									</div>
								</a>

							</div>
						</div>

					</el-col>
					<el-col :span="2" style="height: 100px;">
						<a href="javascript:;" @click="right()"><i class="el-icon-d-arrow-right"
								style="font-size: 30px;line-height: 100px;"></i></a>
					</el-col>
				</el-row>


				<div style="margin-top: 20px;width: 90%;margin-left: 1%;margin-bottom: 20px;">
					<img :src="information.imgSrc2" style="height: 72px;" />
					<div style="text-align: left;margin-top: 10px;font-size: 15px;color: #767676;">
						<p style="text-indent: 30px;margin-bottom: 10px;" v-for="item in information.data">
							{{item}}
						</p>
					</div>
				</div>

			</div>
		</div>
	</div>

</template>

<script>
	import axios from 'axios';

	import data from '../static/AirlineCompany.json';

	export default {
		data() {
			return {
				rightShiftL: null,
				leftShiftL: null,
				airlineCompanyData: '',
				airlineCompanyDataEnd: '',
				information: ''
			}
		},
		created() {
			for (var i = 0; i < data.length; i++) {
				data[i].imgSrc = require("../" + data[i].imgSrc);
				data[i].imgSrc2 = require("../" + data[i].imgSrc2);
			}
			this.airlineCompanyData = data.slice(0, data.length - 1);
			this.airlineCompanyDataEnd = data[data.length - 1];
			this.information=this.airlineCompanyData[0];
		},
		methods: {
			left() {
				if (this.leftShiftL == null) {
					var hScrollTop = document.getElementById('mian');
					var i = 0;
					this.leftShiftL = setInterval(() => {
						if (i > 120) {
							clearInterval(this.leftShiftL);
							this.leftShiftL = null;
						}
						i += 1;
						hScrollTop.scrollLeft -= 1;
					}, 1);
				}
			},
			right() {
				if (this.rightShiftL == null) {
					var hScrollTop = document.getElementById('mian');
					var i = 0;
					this.rightShiftL = setInterval(() => {
						if (i > 120) {
							clearInterval(this.rightShiftL);
							this.rightShiftL = null;
						}
						i += 1;
						hScrollTop.scrollLeft += 1;
					}, 1);
				}
			},
			informationSwitching(index) {
				this.information = this.airlineCompanyData[index];
			},
			informationSwitchingend() {
				this.information = this.airlineCompanyDataEnd;
			}
		}
	}
</script>

<style>
	.div {
		overflow: hidden;
	}

	.box {
		padding: 10px 0;
		white-space: nowrap;
		/*文本不会换行，文本会在在同一行上继续*/
		overflow-y: auto;
		/*可滑动*/
	}

	/*自定义滚动条的伪对象选择器, CSS 可以隐藏滚动条*/
	.box::-webkit-scrollbar {
		display: none;
	}

	.box1 {
		border-radius: 10px;
		border: rgb(0, 0, 0, 0.2) 1px solid;
		width: 100px;
		margin-left: 20px;
		height: 90px;
		background: #fff;
		display: inline-block;
		/*行内块元素*/
		vertical-align: middle;
	}
</style>